<template>
    <div class="book-item">
        <div class="cover"><img :src="book.cover"  /></div>
        <div class="info">
            <h3>{{book.name}}</h3>
            <h4>{{book.info}}</h4>
            <div class="price">
                <p>￥{{book.price}}</p>
                <!-- <step-input :num="book.number" @change="$emit('change,$event')" /> -->
                <step-input :num="book.number" @change="onChange"/>
            </div>
        </div>
    </div>
</template>

<script>
import StepInput from './StepInput.vue'
    export default {
        components:{StepInput},
        props:['book'],
        methods:{
            onChange(val){
                this.$emit('change',val)
            }
        }
    }
</script>

<style lang="sass" scoped>
.book-item 
    display: flex
    margin-bottom: 10px
    .cover
        width: 80px
        height: 80px
        background: #ccc
        & img 
            width: 80px
            height: 80px
    .info
        flex-grow: 1
        padding-left: 10px
    .price
        display: flex
        justify-content: space-between

</style>